<template>
  <div>
    <el-dialog title="审核流程" :visible.sync="dialogVisible" width="780px">
      <div class="center_dialog">
        <el-descriptions title="" :column="1">
          <el-descriptions-item label="当前节点">{{ userName || '无' }}</el-descriptions-item>
          <el-descriptions-item label="审核人">
            <label v-for="item in userType" :key="item.index">{{ item }},</label>
          </el-descriptions-item>
          <el-descriptions-item label="抄送人">
            <label v-for="item in userTypeCC" :key="item.index">{{ item }},</label>
          </el-descriptions-item>
        </el-descriptions>
        <el-divider>审核流程</el-divider>
        <div class="accep_flex" align="center">
          <el-steps space="80px" align-center finish-status="success" direction="vertical">
            <el-step status="success" title="开始" icon="el-icon-s-help" :description="'开始时间：' + applicationTime">
            </el-step>
            <el-step v-for="(item, index) in auditList" :key="index"
              :status="['wait', 'process', 'success', 'error'][item.status]" :title="item.userName || '-'"
              v-show="item.userType === '0'" icon="el-icon-s-help">
              <span slot="description">
                审核时间：{{ item.auditTime || '-' }}
                <br />
                审核意见：{{ item.view || '-' }}
              </span>
            </el-step>
            <el-step :status="islength ? 'success' : 'wait'" title="结束" icon="el-icon-s-help">
            </el-step>
          </el-steps>
        </div>
      </div>
      <div align="center" slot="footer" class="dialog-footer">
        <el-button @click="() => dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { auditDatail } from '@/api/deviceConsumable/acquisitionapplication'

export default {
  data () {
    return {
      auditList: [],
      userTypeCC: [],
      userType: [],
      islength: true,
      dialogVisible: false,
      userName: '',
      applicationTime: ''
    }
  },
  methods: {
    // 打开表单对话框
    openDialog (val = null) {
      this.userType = []
      this.userTypeCC = []
      if (val) {
        this.applicationTime = val.applicationTime
        auditDatail({ applicationId: val.pickId }).then(res => {
          this.dialogVisible = true
          this.auditList = res.data
          this.auditList.forEach(item => {
            if (item.userType && item.userType === '0') {//审核人
              item.userName && this.userType.push(item.userName)
            } else {//抄送人
              item.userName && this.userTypeCC.push(item.userName)
            }
          })

          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
            if (element.status !== '2' && element.userType === '0') {//获取当前节点
              this.islength = false
              return this.userName = element.userName
            }
          }

        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  // text-align: center;
  width: 65%;
  // padding: 0 10% 0 10%;
  box-sizing: border-box;
  margin: 0px auto;
}

.accep_flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>